@extends('admin.layouts.base')
@section('content')
    <el-col :span="12">
        <div class="grid-content bg-purple"></div>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="form.price" type="number"></el-input>
            </el-form-item>
            {{--            <el-form-item label="价格">--}}
            {{--                <el-input v-model="form.price"></el-input>--}}
            {{--            </el-form-item>--}}
            <el-form-item label="商品分类">
                <el-select v-model="form.type_id" placeholder="商品分类">
                    @foreach($categories as $category)
                        <el-option label="{{$category->name}}" value="{{$category->id}}"></el-option>
                    @endforeach
                </el-select>
            </el-form-item>

            <el-form-item label="描述">
                <el-input type="textarea" v-model="form.details"></el-input>
            </el-form-item>

            <el-form-item label="商品图片">
                <el-upload class="avatar-uploader" action="{{route('admin.upload.file')}}" :show-file-list="false"
                           :on-success="handleAvatarSuccess">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item v-for="(attr, index) in form.attrs" :label="'搭配' + index" :key="attr.key"
                          :prop="'form.attrs.' + index + '.value'">
                <el-input v-model="attr.color" placeholder="颜色"></el-input>
                <el-input v-model="attr.size" placeholder="尺寸"></el-input>
                <el-input v-model="attr.num" placeholder="库存"></el-input>
                <el-button @click.prevent="removeDomain(index)">删除</el-button>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                {{--                <el-button>取消</el-button>--}}
                <el-button @click="addDomain">添加属性</el-button>
            </el-form-item>
        </el-form>
    </el-col>
@endsection
@section('scripts')
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    goods_id: parseInt('{{$goodsId ?? 0}}'),
                    visible: false,
                    form: {
                        name: '',
                        goods_id: '',
                        pic: '',
                        // region: '',
                        // date1: '',
                        // date2: '',
                        // delivery: false,
                        attrs: [],
                        // resource: '',
                        // desc: ''
                    },
                    imageUrl: '',
                }
            },
            methods: {
                onSubmit() {
                    let self = this;
                    axios.post('{{route('admin.goods.store')}}', this.form).then(function (res) {
                        if (res.data.status !== 0) {
                            return self.$message(res.data.msg);
                        }
                        self.$message('保存成功');
                        location.href = '{{route('admin.goods')}}';
                    });
                },
                handleAvatarSuccess(res, file) {
                    console.log(res);
                    // this.imageUrl = URL.createObjectURL(file.raw);
                    this.imageUrl = res.data.url;
                    this.form.pic = res.data.url;
                },
                addDomain() {
                    this.form.attrs.push({
                        color: '',
                        size: '',
                        num: '',
                        key: Date.now()
                    });
                },
                removeDomain(index) {
                    let attrs = this.form.attrs;
                    attrs.splice(index, 1);
                    this.form.attrs = attrs;
                }
            },
            mounted() {
                if (!this.goods_id > 0) {
                    return;
                }
                let self = this;
                axios.get('{{route('admin.goods.detail')}}?goods_id=' + this.goods_id).then(function (res) {
                    if (res.data.status !== 0) {
                        return;
                    }
                    let goods = res.data.data;
                    self.form.goods_id = goods.goods_id;
                    self.form.name = goods.name;
                    self.form.pic = goods.pic;
                    self.imageUrl = goods.pic;
                    self.form.price = goods.price;
                    self.form.details = goods.details;
                    self.form.attrs = goods.matches;
                })
            }
        })
    </script>
@endsection
